<script setup lang="ts"></script>
<template>
  <div class="content">
    <h1 class="list_tit">商城</h1>
    <div class="good_type">
      <p>女装</p>
      <p>男装</p>
      <p>手机</p>
      <p>电脑</p>
      <p>运动</p>
    </div>
    <div class="list">
      <div class="list_ul">
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>懒人小沙发</p>
          <span>舒适休闲，完善支撑</span>
          <h3>126.4<span class="isHot">热销</span></h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>减压弹力球</p>
          <span>释放压力，放松身心</span>
          <h3>95.2</h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>简约一字发夹</p>
          <span>简约设计，百搭款式</span>
          <h3>15.9></h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>毛线小兔子耳朵发夹</p>
          <span>可爱萌趣，精致做工</span>
          <h3>12.7</h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>懒人小沙发</p>
          <span>舒适休闲，完善支撑</span>
          <h3>126.4<span class="isHot">热销</span></h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>减压弹力球</p>
          <span>释放压力，放松身心</span>
          <h3>95.2</h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>简约一字发夹</p>
          内部资料
          <span>简约设计，百搭款式</span>
          <h3>15.9></h3>
        </div>
        <div class="list_li">
          <div class="li_img">商品图片</div>
          <p>毛线小兔子耳朵发夹</p>
          <span>可爱萌趣，精致做工</span>
          <h3>12.7</h3>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.content{
padding-bottom:300px;
}
.good_type{
display: flex;
justify-content:start;
width:1280px;
margin:30px auto 50px;
border-bottom:2px solid #ccc;
}
.good_type p{
width:100px;
line-height:40px;
text-align:center;
cursor: pointer;
}
.good_type p:hover{
background:#f2f2f2;
}
.list_tit{
width:1280px;
margin:30px auto 50px;
display: flex;
justify-content:center;
}
.list{
width:100%;
display: flex;
justify-content:center;
position:relative;
}
.list_ul{
width:1280px;
height:300px;
display: flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:center;
}
.list_li{
position:relative;
width:300px;
height:100%;
box-shadow: 2px 2px 10px #ddd;
text-align:left;
margin-bottom:20px;
cursor: pointer;
}
.li_img{
width:100%;
height:200px;
text-align:center;
line-height:200px;
background:#ABE1CC;
}
.list_li p{
font-size:18px;
line-height:30px;
}
.list_li span{
display:block;
font-size:14px;
color:#888;
}
.list_li h3{
font-size:28px;
color:#CF4444;
line-height:60px;
}
.list_li .isHot{
position: absolute;
width: 50px;
height: 30px;
text-align:center;
line-height:30px;
background:#CF4444;
border-radius: 10px;
bottom: 30px;
right: 10px;
color: yellow;
font-family:"宋体"
}
</style>
